<template>
  <div>
    <header>
       <nuxt-link to='/'>{{$t('home')}}</nuxt-link>
       <nuxt-link to='/news'>{{$t('news')}} </nuxt-link>
       <nuxt-link to='/about'>{{$t('about')}} </nuxt-link>
    </header>
    <Nuxt />
  <footer>学而时习之，<el-button @click="changel('zh')">中文</el-button> <el-button @click="changel('en')">english</el-button>不亦说乎</footer>

  </div>
</template>
<script>
import {mapState,mapMutations} from 'vuex'
export default {
  data(){
    return {
       oldLang:'zh'
    }
  },
  computed:{
    ...mapState('user',['lang'])
  },
  methods:{
    ...mapMutations('user',['setLang']),
     changel(lang){
         if(lang==this.oldLang) return 
         this.oldLang=lang
         //先是客户端改变
         this.setLang(lang)
         //在改变i18n里的状态
         this.$i18n.locale=lang
    
        this.$router.push('/')
        
     }
  }
}
</script>
<style lang="scss" scoped>
header {
  padding: 20px 0;
  background: rgba($color: #333, $alpha: 0.2);
  a {
    color: #007cba;
    text-decoration: none;
    padding: 0 20px;
    font-weight: bold;
  }
  a:hover {
    color: #333;
  }
}
</style>
